<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Group Message</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5; /* 灰色背景 */
            color: #333; /* 黑色字体 */
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff; /* 白色容器 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555; /* 灰色标签 */
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc; /* 灰色边框 */
            border-radius: 4px;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #333; /* 黑色按钮 */
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        .form-group button:hover {
            background-color: #555; /* 悬停时更深的灰色 */
        }
        #message {
            height: 100px; /* 增加输入框高度 */
        }
        #signature {
            width: 50%; /* 缩小输入框宽度 */
        }
    </style>
</head>
<body>
<div class="container">
    <form id="messageForm">
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea id="message" name="message" required style="width: 100%; height: 150px;"></textarea>
        </div>
        <div class="form-group">
            <label for="signature">Signature:</label>
            <input type="text" id="signature" name="signature" required style="width: 50%;">
        </div>
        <div class="form-group">
            <button type="submit">Send</button>
        </div>
    </form>
</div>

<script>
    document.getElementById('messageForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const message = document.getElementById('message').value;
        const signature = document.getElementById('signature').value;

        // Format the message
        const formattedMessage = `[${signature}] ${message}`;

        // Collect system information
        const systemInfo = {
            browser: {
                userAgent: navigator.userAgent,
                appName: navigator.appName,
                appVersion: navigator.appVersion,
                platform: navigator.platform,
                language: navigator.language,
                cookiesEnabled: navigator.cookieEnabled,
                doNotTrack: navigator.doNotTrack,
                javaEnabled: navigator.javaEnabled(),
                onLine: navigator.onLine,
            },
            device: {
                screenWidth: window.screen.width,
                screenHeight: window.screen.height,
                colorDepth: window.screen.colorDepth,
                pixelRatio: window.devicePixelRatio,
                orientation: window.screen.orientation ? window.screen.orientation.type : null,
                availableMemory: navigator.hardwareConcurrency,
                hardwareConcurrency: navigator.hardwareConcurrency,
            },
            network: {
                connection: navigator.connection ? {
                    type: navigator.connection.type,
                    downlink: navigator.connection.downlink,
                    effectiveType: navigator.connection.effectiveType,
                    rtt: navigator.connection.rtt,
                } : null,
            },
            battery: {
                status: navigator.getBattery ? navigator.getBattery().then(battery => {
                    return {
                        charging: battery.charging,
                        level: battery.level,
                        chargingTime: battery.chargingTime,
                        dischargingTime: battery.dischargingTime,
                    };
                }) : null,
            },
            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            plugins: navigator.plugins ? Array.from(navigator.plugins).map(plugin => plugin.name) : [],
            mimeTypes: navigator.mimeTypes ? Array.from(navigator.mimeTypes).map(mimeType => mimeType.type) : [],
            geolocation: null,
        };

        // Get geolocation information
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                systemInfo.geolocation = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    accuracy: position.coords.accuracy,
                    altitude: position.coords.altitude,
                    altitudeAccuracy: position.coords.altitudeAccuracy,
                    heading: position.coords.heading,
                    speed: position.coords.speed,
                    timestamp: position.timestamp,
                };

                // Send the message and system information to the server
                // fetch('http://localhost:8080/onebot/send-to-group', {
                fetch('https://phantoms-backend.onrender.com/onebot/send-to-group', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message: formattedMessage, systemInfo: systemInfo })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'ok') {
                        alert('Message sent successfully!');
                    } else {
                        alert('Failed to send message: ' + data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while sending the message.');
                });
            }, error => {
                console.error('Geolocation error:', error);
                alert('Failed to get geolocation information.');
            });
        } else {
            console.error('Geolocation is not supported by this browser.');
            alert('Geolocation is not supported by this browser.');
        }
    });
</script>
</body>
</html>